import { Form, Input, Button, message } from 'antd';
import React from 'react';
import style from './index.module.less';
import { UserOutlined, EyeOutlined } from '@ant-design/icons';
import { useHistory } from 'react-router-dom';
import { replaceToken } from '@/store/counterSlice';
import { useDispatch } from 'react-redux';


const Login = () => {
  const dispatch = useDispatch();
  const history = useHistory();
  const onFinish = () => {
    dispatch(replaceToken({ token: 'asadas1231213' }));
    message.success('登录成功');
    localStorage.setItem('token', 'asadas1231213');
    history.push('/');
  };

  return (
    <div className={style.login}>
      <Form
        name="basic"
        className={style.login_form}
        labelCol={{
          span: 8,
        }}
        wrapperCol={{
          span: 16,
        }}
        onFinish={onFinish}
        initialValues={{ username: 'admin', password: '123456' }}
      >
        <Form.Item
          name="username"
          rules={[
            {
              required: true,
              message: '请输入用户名!',
            },
          ]}
        >
          <Input prefix={<UserOutlined className="site-form-item-icon" />} style={{ width: 400, height: 40 }} />
        </Form.Item>

        <Form.Item
          name="password"
          rules={[
            {
              required: true,
              message: '请输入密码!',
            },
          ]}
        >
          <Input.Password prefix={<EyeOutlined />} style={{ width: 400, height: 40 }} />
        </Form.Item>


        <Button type="primary" htmlType="submit" style={{ width: 400, height: 40 }}>
          登录
        </Button>
      </Form>
    </div>
  );
};

export default Login;
